<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索"  v-model="formData.kw" :show-action="false" :clearabled="true" :animation="false"
					shape="round" bgColor="#F5F6FA" height="72rpx" searchIconColor="#999999" placeholderColor="#999999" @change="changekeword"
					:inputStyle="{
						color: '#333333',
						backgroundColor: '#F5F6FA',
					}"></u-search>
			</view>
			<u-tabs ref="uTabs" :current="current" :list="tabs" @click="changeTab" lineColor="#FE4F04" :scrollable="false"></u-tabs>
		</view>
		<view class="content-box">
			<view class="content-total">
				共 {{total}} 条记录
			</view>
			<view class="empty-review" v-if="list.length == 0">
				<image src='../static/images/empty-review.png' mode="aspectFit"></image>
			</view>
			<view class="content-list">
				<view class="content-item" v-for="item in list" :key="item.id" >
					<view class="content-item-cell" style="margin-bottom: 8rpx;">
						<view class="content-item-name"> {{item.category}} </view>
						<view class="content-item-name"> {{item.money}} </view>
					</view>
					<view class="content-item-cell" style="margin-bottom: 14rpx;">
						<span>{{item.user_name}}</span>
						<span>{{item.room_name}}</span>
						<span>{{item.build_address}}</span>
					</view>
					<view class="content-item-cell" style="margin-bottom: 14rpx;">
						<view class="content-item-mobile"> {{item.username}} 删除于 {{item.delete_time_text}} </view>
					</view>
					<view class="content-item-opt">
						<u-button :custom-style="restoreBtnStyle">恢 复</u-button>
						<u-button :custom-style="destroyBtnStyle">彻底删除</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom-btn">
			<view class="btn">
				类型
			</view>
			<view class="btn">
				全部大楼
			</view>
			<view class="btn">
				筛选
			</view>
		</view> -->
	</view>
</template>


<script>
	import {
		recycleBill,recycleBillRestore,recycleBillDestroy
	} from "@/api/part2"
export default {
	data() {
		return {
			formData: {
				page: 1,
				page_size: 10,
				kw:'',
				type:'1',
			},
			current:0,
			total: 0,
			list:[],
			tabs:[
				{name:'全部',type:'0'},
				{name:'今天',type:'1'},
				{name:'昨天',type:'2'},
				{name:'本月',type:'3'},
				{name:'上月',type:'4'},
				{name:'近15天',type:'5'}
			],
			restoreBtnStyle: {
				background: "#FFF",
				borderRadius: "44rpx",
				fontSize: "26rpx",
				color: "#00aa00",
				height: "64rpx",
				width: "152rpx",
				border:"2rpx solid #00aa00",
				margin:"0",
				padding:"0"
			},
			destroyBtnStyle: {
				background: "#FFF",
				borderRadius: "44rpx",
				fontSize: "26rpx",
				color: "#F00",
				width: "152rpx",
				border:"2rpx solid #F00",
				margin:"0",
				padding:"0"
			},
			timerId:null
		};
	},
	onShow() {
		this.handleFilter()
	},
	async onReachBottom() {
		if(this.list.length < this.total) {
			this.formData.page++
			this.init()
		}
	},
	methods: {
		changekeword() {
			if(this.timerId) {
				clearInterval(this.timerId)
			}
			let that = this
			this.timerId = setTimeout(()=>{
				that.handleFilter()
			},200)
		},
		handleFilter(){
			this.formData.page = 1
			this.list = []
			this.init()
		},
		changeTab(item) {
			console.log(item)
			this.formData.type = item.type
			this.handleFilter()
		},
		init() {
			recycleBill(this.formData).then(res => {
				console.log(res.data.data);
				res.data.data.data.forEach((item) => {
					this.list.push(item)
				})
				this.total = res.data.data.total
			})
		},
		changeSort(sort) {
			this.formData[sort] = this.formData[sort] == 'asc' ? 'desc' : 'asc'
			this.formData.page = 1
			this.list = []
			this.init()
		}
	},
};
</script>

<style lang="less" scoped>
	.container {
		padding-bottom: 120rpx;
	}
	.content-wrapper {
		background-color: #fff;
		.search-box {
			padding: 12rpx 20rpx 24rpx 32rpx;
			background-color: #fff;
			display: flex;
		}
	}
	
	.content-box {
		padding: 0 32rpx;
	}
	.content-total {
		padding: 16rpx 0;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
	}
	.content-item {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.01);
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
	}
	.content-item-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;
		.content-item-name {
			font-family: PingFangHK, PingFangHK;
			font-weight: 700;
			font-size: 30rpx;
			color: #222222;
			line-height: 42rpx;
		}
		.content-item-type {
		}
		.content-item-mobile {
			color: #444444;
		}
		.content-item-date {
		}
		.content-item-wechat {
			font-size: 20rpx;
			color: #999999;
			line-height: 28rpx;
		}
	}
	
	.content-item-opt {
		display: flex;
		justify-content: flex-end;
		gap: 24rpx;
		padding: 12rpx 0;
	}
	
	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		/* 关键样式 - 使用 constant 和 env 兼容不同设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		/* 其他样式按需添加 */
		background: #FFFFFF;
		
		
		display: flex;
		justify-content: space-between;
		.btn {
			padding: 30rpx 64rpx;
			font-weight: 700;
			font-size: 30rpx;
			color: #161616;
			line-height: 42rpx;
		}
	}
	/deep/ .u-tabs__wrapper__nav__item {
		padding: 0 !important;
	}
	.empty-review {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 0;
	
		image {
			width: 328rpx;
			height: 208rpx;
			margin-bottom: 24rpx;
		}
	}
</style>